<script setup>
import { ref, onMounted } from 'vue';
import { getProductList } from '@/api/business/product';
import { ElMessage } from 'element-plus'

const productList = ref([]);

onMounted(() => {
  doGetProductList();
});

// 获取商品列表数据
const doGetProductList = async () => {
  try {
    const res = await getProductList();
    if (res.code === 200) {
      productList.value = res.data.list
    } else {
      ElMessage.error(res.msg || '获取商品列表失败')
    }
  } catch (error) {
    ElMessage.error(error.response?.data?.msg || '获取商品列表失败')
  }
}
</script>

<template>
  <div>
    <h1>商品列表</h1>
    <ul>
      <li v-for="product in productList" :key="product.id">
        <router-link :to="`/product/${product.id}`">{{ product.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<style scoped>

</style>